<template>
    <div class="admin-add">

        <el-form ref="adminForm" class="adminForm" :model="adminParams" :rules="rules" status-icon  label-width="100px" size="small">
            <el-form-item  label="管理员名称" prop="adminname">
                <el-input v-model="adminParams.adminname"></el-input>
            </el-form-item>
            <el-form-item  label="管理员密码" prop="password">
                <el-input v-model="adminParams.password"></el-input>
            </el-form-item>
            <el-form-item  label="管理员等级" prop="role">
                <el-select v-model="adminParams.role" placeholder="请选择" clearable @change="roleChangeHandler">
                    <!-- <el-option label="请选择" value=""></el-option> -->
                    <el-option label="超级管理员" value="1"></el-option>
                    <el-option label="普通管理员" value="2"></el-option>
                    <el-option label="普通用户" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item  label="权限菜单" prop="checkedKeys">
                <el-tree 
                ref="tree" 
                :data="menus" 
                :props="defaultProps" 
                node-key="path" 
                show-checkbox
                default-expand-all
                ></el-tree>
            </el-form-item>
           
            <el-form-item>
                <el-button type="primary" @click="submitHandler">添加</el-button>
                <el-button type="primary" @click="resetHander">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {menus} from "@/router/routes"
    import {addAdminAPI} from "@/api/admin"


    export default {
        name:"AdminAddView",
        data(){
            return {
                adminParams:{
                    adminname:"",  // 管理员名称
                    password:"",   // 密码
                    role:"",    // 角色等级  1 => 超级管理员  2. 普通管理员   3. 普通用户
                    checkedKeys:[],  // 存储用户可以访问权限菜单
                },
                menus,
                defaultProps:{
                    label:"label",
                    children:"children",
                },
                rules:{
                    adminname:[
                        {required:true,message:"请输入管理员名称",trigger:"blur"},
                        {pattern:/^[a-zA-Z_]\w{4,5}$/,message:"管理员名称由字母 数字 下划线组成,5-6位",trigger:"blur"}
                    ],
                    password:[
                        {required:true,message:"请输入管理员密码",trigger:"blur"},
                        {pattern:/^\w{4,12}$/,message:"密码由字母 数字 下划线组成,4-12位",trigger:"blur"}
                    ],
                    role:[
                        {required:true,message:"请选择管理员等级",trigger:"blur"},
                        {pattern:/^[123]$/,message:"请选择管理员等级",trigger:"change"}
                    ],
                    checkedKeys:[
                        {type:"array",required:true,message:"请选择管理员权限",trigger:"blur"},
                    ]
                }
            }
        },
        methods:{
            async addAdmin(){
                try {
                    var res = await addAdminAPI(this.adminParams);
                    console.log("管理员列表",res);
                    this.list = res.data;
                } catch (error) {
                    this.$message.error(error.message)
                }
            },
            roleChangeHandler(role){
                console.log("role",role);
                switch(role){
                    case "":  
                        this.$refs.tree.setCheckedKeys([]);
                        break;
                    case "1":  // 超级管理员
                        this.$refs.tree.setCheckedKeys(["/home","/admin","/pro","/banner"]);
                        break;
                    case "2":  // 普通管理员
                        this.$refs.tree.setCheckedKeys(["/home","/pro","/banner"]);
                        break;
                    case "3":  // 普通用户
                        this.$refs.tree.setCheckedKeys(["/home","/pro/list","/banner/list"]);
                        break; 
                }
                // 将权限菜单存储到数组中
                this.adminParams.checkedKeys = this.$refs.tree.getCheckedKeys();
            },
            submitHandler(){
                // el-tree 尝试

                // console.log("获取选中key",this.$refs.tree.getCheckedKeys());

                // 设置选中的key
                // this.$refs.tree.setCheckedKeys(["/home","/admin","/pro","/banner"])  // 超级管理员
                // this.$refs.tree.setCheckedKeys(["/home","/pro","/banner"])  // 普通管理员
                // this.$refs.tree.setCheckedKeys(["/home","/pro/list","/banner/list"])  // 普通用户


                this.$refs.adminForm.validate((bool)=>{
                    console.log("bool",bool);
                    this.addAdmin().then(()=>{
                        this.resetHander();
                    })
                })
            },
            resetHander(){
                // 重置 表单
                this.$refs.adminForm.resetFields();
                // 重置 树状图
                this.$refs.tree.setCheckedKeys([]);
            }
        },
    }
</script>

<style  scoped>
    .adminForm{
        width: 50%;
    }
</style>